<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 系统工具</el-breadcrumb-item>
                <el-breadcrumb-item>基础设置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" v-loading="loading">
            <div class="tab_container">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="元数据存储设置" name="first">
                        <el-row class="mt20">
                            <el-col :span="8">
                                <span>数据库驱动：</span>
                            </el-col>
                            <el-col :span="15">
                                <el-select placeholder="请选择" v-model="connectType" clearable>
                                    <el-option v-for="(item,index) in connectTypeValues" :label="item.name" :value="item.typeId" :key="index"></el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="8"><span>IP地址：</span></el-col>
                            <el-col :span="4"><el-input v-model="connectIp"></el-input></el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="8"><span>端口：</span></el-col>
                            <el-col :span="4"><el-input v-model="port"></el-input></el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="8"><span>SID：</span></el-col>
                            <el-col :span="4"><el-input v-model="serviceId"></el-input></el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="8"><span>用户名：</span></el-col>
                            <el-col :span="4"><el-input v-model="userName"></el-input></el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="8"><span>密码：</span></el-col>
                            <el-col :span="4"><el-input type="password" v-model="userPwd"></el-input></el-col>
                            <el-col :span="4" class="ml10">
                                <el-button @click="testLink">链接测试</el-button>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="系统设置" name="second">
                        <el-row class="mt20">
                            <el-col :span="8"><span>系统标题：</span></el-col>
                            <el-col :span="6"><el-input v-model="systemTitle"></el-input></el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="8"><span>登录页背景图：</span></el-col>
                            <el-col :span="16">
                            <el-upload
                                class="upload-demo"
                                ref="upload"
                                action="/api/file/upload"
                                accept="image/jpeg,image/png"
                                :before-upload="onBeforeUpload"
                                :data="uploadData"
                                :on-success="handleSuccess"
                                :file-list="fileList"
                                :auto-upload="false">
                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传文件</el-button>
                                <div slot="tip" class="el-upload__tip">背景图片大小为1920*720(px)，分辨率72(dpi)</div>
                            </el-upload>
                            </el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="8"><span>调度线程数：</span></el-col>
                            <el-col :span="6"><el-input v-model="scheduleNum"></el-input></el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="8"><span>表格每页条数：</span></el-col>
                            <el-col :span="6"><el-input v-model="threadNum" type="number"></el-input></el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="8"><span class="ml10">会话持续时间：</span></el-col>
                            <el-col :span="6"><el-input v-model="sessionTime" type="number"></el-input></el-col>
                            <el-col :span="2"><span>小时</span></el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="8"><span>调度执行时间：</span></el-col>
                            <el-col :span="6">
                                <el-time-picker
                                    is-range
                                    v-model="dispatchTime"
                                    value-format="HH:mm"
                                    range-separator="至"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    placeholder="选择时间范围"
                                    @change="changeTime"
                                    >
                                </el-time-picker>
                            </el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="8"><span>调度任务默认状态：</span></el-col>
                            <el-col :span="8">
                                <el-radio v-model="taskDefaultStatus" label="0">启用</el-radio>
                                <el-radio v-model="taskDefaultStatus" label="1">暂挂</el-radio>
                            </el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="8"><span>新用户数据立即生效：</span></el-col>
                            <el-col :span="15">
                                <el-radio v-model="dataViewFlag" label="0">下次调度生效</el-radio>
                                <el-radio v-model="dataViewFlag" label="1" disabled>立即生效</el-radio>
                            </el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="8"><span>日志控制级别：</span></el-col>
                            <el-col :span="6">
                                <el-select placeholder="请选择" v-model="logLevel" clearable>
                                    <el-option v-for="(item,index) in levels" :label="item.value" :value="item.name" :key="index"></el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="表盘设置" name="third">
                        <el-row class="mt20">
                            <el-col :span="8"><span>仪表盘默认显示条数：</span></el-col>
                            <el-col :span="6"><el-input v-model="dashBoardNum" type="number"></el-input></el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="8"><span>仪表盘默认显示顺序：</span></el-col>
                            <el-col :span="6">
                                <el-select placeholder="请选择" v-model="dashBoardSequence" clearable>
                                    <el-option v-for="(item,index) in sortValues" :label="item.label" :value="item.value" :key="index"></el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="8"><span>明细页打开方式：</span></el-col>
                            <el-col :span="10">
                                <el-radio v-model="dashBoardOpenType" label="0">当前页面打开</el-radio>
                                <el-radio v-model="dashBoardOpenType" label="1">新页面打开</el-radio>
                            </el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="8"><span>仅显示异常仪表盘：</span></el-col>
                            <el-col :span="8">
                                <el-switch v-model="simpleFlag"></el-switch>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
                <div class="btn-container2">
                    <el-button @click="restartService" :loading="btnStart">重启后台服务</el-button>
                    <el-button type="primary" @click="saveBasicInfo" :loading="btnloading">确定</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            tagstyle:{
                width:'110px',
                height: '30px',
                backgroundImage: "url(" + require("../../assets/images/tab.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "100% 100%",
                marginTop: '0',
                color: '#fff',
                fontSize: '13px',
                paddingLeft: '10px',
                lineHeight: '30px'
            },
            loading: false,
            threadNum:0,
            dashBoardNum:0,
            sessionTime:0,
            scheduleNum:"",
            simpleFlag: true,
            //repeatFlag:'false',
            btnloading: false,
            btnStart: false,
            taskDefaultStatus: "0",
            dataViewFlag:"0",
            dispatchTime:"",
            connectType:"",
            connectIp:"",
            port:"",
            serviceId:"",
            userName:"",
            userPwd:"",
            dashBoardSequence:"",
            isChange: false,
            systemTitle:"",
            sortValues:[{
                label:'按定义时间顺序',
                value:'0',
            },{
                label:'按定义时间倒序',
                value:'1',
            }],
            logLevel:"",
            dashBoardOpenType:"0",
            activeName:"first",
            fileList: [],
            uploadData: {
                sessionId: localStorage.getItem('sessionId')
            },
            loginBg:""
        }
    },
    mounted(){
        if(localStorage.getItem('pageType') == 0) {
            this.$router.push({ path:'/user' });
        }
        this.getLogLevels();
        this.getConnectType();
        this.getBasicInfo();
    },
    computed: mapState({
        msg: state => state.system.msg,
        basicInfo: state => state.system.basicInfo,
        connectTypeValues: state => state.system.connectType,
        levels: state => state.system.logLevels
    }),
    methods:{
        onBeforeUpload(file) {
            const isIMAGE = file.type === 'image/jpeg'||'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if(!isIMAGE) {
                this.$message.error('上传文件只能是图片格式');
            }
            if(!isLt2M) {
                this.$message.error('上传文件大小不能超过 2MB!');
            }
            return isIMAGE && isLt2M;
        },
        submitUpload() {
            this.$refs.upload.submit();
        },
        handleSuccess(res, file, fileList) {
            console.log(res);
            this.loginBg = res.data[0];
        },
        formatDate(d) {
            let now = new Date(d);
            let hour = now.getHours()
            let mintute = now.getMinutes()
            if(hour<10){
                hour = "0"+hour
            }
            if(mintute<10){
                mintute = "0"+mintute
            }
            return hour+":"+mintute
        },
        changeTime() {
            this.isChange = true;
        },
        testLink() {
            let params = {
                connectIp: this.connectIp,
                connectType: this.connectType,
                port: this.port,
                serviceId: this.serviceId,
                userName: this.userName,
                userPwd: this.userPwd,
                sessionId: localStorage.getItem('sessionId')
            }
            this.$store.dispatch('testLink',params).then(() => {
                this.$message(this.msg);
            });
        },
        getLogLevels() {
            this.$store.dispatch('getLevels',{
                sessionId: localStorage.getItem('sessionId')
            })
        },
        getConnectType() {
            this.$store.dispatch("getTypes",{
                sessionId: localStorage.getItem('sessionId')
            })
        },
        getBasicInfo() {
            this.$store.dispatch('getBasicInfo',{
                sessionId: localStorage.getItem('sessionId')
            }).then(() => {
                this.loading = false;
                this.connectType = this.basicInfo.databaseConfig.connectType;
                this.connectIp = this.basicInfo.databaseConfig.connectIp;
                this.port = this.basicInfo.databaseConfig.port;
                this.serviceId = this.basicInfo.databaseConfig.serviceId;
                this.userName = this.basicInfo.databaseConfig.userName;
                this.userPwd = this.basicInfo.databaseConfig.userPwd;
                this.threadNum = this.basicInfo.commonSettingEntity.threadNum;
                this.scheduleNum = this.basicInfo.commonSettingEntity.scheduleNum;
                this.simpleFlag = this.basicInfo.commonSettingEntity.simpleFlag;
                this.systemTitle = this.basicInfo.commonSettingEntity.systemTitle;
                this.dashBoardNum = this.basicInfo.commonSettingEntity.dashBoardNum;
                this.sessionTime = this.basicInfo.commonSettingEntity.sessionTime;
                this.dispatchTime = [new Date(2018,10,10,parseInt(this.basicInfo.commonSettingEntity.startTime.substr(0,2)),parseInt(this.basicInfo.commonSettingEntity.startTime.substr(3,2))),new Date(2018,10,10,parseInt(this.basicInfo.commonSettingEntity.endTime.substr(0,2)),parseInt(this.basicInfo.commonSettingEntity.endTime.substr(3,2)))];
                this.repeatFlag = this.basicInfo.commonSettingEntity.repeatFlag && this.basicInfo.commonSettingEntity.repeatFlag.toString();
                this.logLevel = this.basicInfo.commonSettingEntity.logLevel;
                this.taskDefaultStatus = typeof this.basicInfo.commonSettingEntity.taskDefaultStatus=="number" && this.basicInfo.commonSettingEntity.taskDefaultStatus.toString();
                this.dataViewFlag = typeof this.basicInfo.commonSettingEntity.dataViewFlag=="number" && this.basicInfo.commonSettingEntity.dataViewFlag.toString();
                this.dashBoardSequence = typeof this.basicInfo.commonSettingEntity.dashBoardSequence=="number" && this.basicInfo.commonSettingEntity.dashBoardSequence.toString();
                this.dashBoardOpenType = typeof this.basicInfo.commonSettingEntity.dashBoardOpenType=="number" && this.basicInfo.commonSettingEntity.dashBoardOpenType.toString();
            });
        },
        saveBasicInfo() {
            if(this.connectType === "") {
                this.$message("请选择数据库驱动");
            }else if(this.connectIp == "") {
                this.$message('请输入IP地址');
            }else if(this.port == "") {
                this.$message('请输入端口');
            }else if(this.serviceId == "") {
                this.$message('请输入SID');
            }else if(this.userName == "") {
                this.$message('请输入用户名');
            }else if(this.userPwd == "") {
                this.$message('请输入密码');
            }else if(this.threadNum == "") {
                this.$message('请输入表格每页条数');
            }else if(this.sessionTime == "") {
                this.$message('请输入会话持续时间');
            }else if(this.dispatchTime == null) {
                this.$message('请选择调度执行时间');
            }else if(this.logLevel === "") {
                this.$message('请选择日志控制级别');
            }else if(this.dashBoardNum == "") {
                this.$message('请输入仪表盘默认显示条数');
            }else if(this.dashBoardSequence === "") {
                this.$message('请选择仪表盘默认显示顺序');
            }else if(this.systemTitle == "") {
                this.$message('请输入系统标题');
            }else if(this.scheduleNum == "") {
                this.$message('请输入调度线程数');
            }else{
                let date = this.formatDate(this.dispatchTime[0])
                let date1 = this.formatDate(this.dispatchTime[1])
                let startTime = this.isChange?this.dispatchTime[0]:date
                let endTime = this.isChange?this.dispatchTime[1]:date1
                this.btnloading = true;
                this.$store.dispatch('saveBasicInfo',{
                    connectType: this.connectType,
                    connectIp: this.connectIp,
                    port: this.port,
                    serviceId: this.serviceId,
                    userName: this.userName,
                    userPwd: this.userPwd,
                    logLevel: this.logLevel,
                    dashBoardSequence: this.dashBoardSequence,
                    dashBoardOpenType: this.dashBoardOpenType,
                    threadNum: this.threadNum,
                    scheduleNum: parseInt(this.scheduleNum),
                    simpleFlag: this.simpleFlag,
                    dashBoardNum: this.dashBoardNum,
                    sessionTime: this.sessionTime,
                    repeatFlag: eval(this.repeatFlag),
                    taskDefaultStatus: this.taskDefaultStatus,
                    dataViewFlag: this.dataViewFlag,
                    startTime: startTime,
                    endTime: endTime,
                    systemTitle: this.systemTitle,
                    loginBg: this.loginBg,
                    sessionId: localStorage.getItem('sessionId')
                }).then(() => {
                    this.btnloading = false;
                    if(this.msg == '设置成功') {
                        this.$message(this.msg);
                        localStorage.setItem('pagesize',this.threadNum);
                        localStorage.setItem('dashboardnum',this.dashBoardNum);
                        localStorage.setItem('openType',this.dashBoardOpenType);
                    }else{
                        this.$message(this.msg);
                    }
                })
            }
        },
        restartService() {
            this.btnStart = true;
            this.$store.dispatch('restartServe',{
                sessionId: localStorage.getItem('sessionId')
            }).then(() => {
                this.btnStart = false;
                if(this.msg == '成功'){
                    this.$message('重启成功，请稍等');
                }else{
                    this.$message(this.msg);
                }
            })
        }
    }
}
</script>
<style>
.btn-container2{
    margin: 40px 0 0 182px;
}
.tab_container{
    width: 677px;
    margin: 0 auto;
}
input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }
</style>

